<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        1、el两种写法：
            1）new vue()内部
            2）vue实例挂载，vm.$mount('#root')
        2、data两种写法：
            1）对象式
            2）函数式
        注：
            由vue管理的函数，不要写箭头函数，否则this指代的就不是Vue实例了

     -->

    <div id="root">
    <h1>hello , {{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        const v = new Vue({
            // el: '#root', //el 指定容器对象，选择器对象
            data: {
                name: 'rain bear',
                blog: {
                    name: '夏季大三角',
                    url: 'https://fairy77.gitee.io/blog/'
                }
            }
        })
        console.log(v)
        // v.$mount('#root')
        
        new Vue({
            el: '#root', //el 指定容器对象，选择器对象
            // 函数
            // data: function() {
            //     console.log('echo', this)
            //     return {
            //         name: 'rain bear fun'
            //     }
            // }
            data() {
                console.log('echo', this)
                return {
                    name: 'rain bear fun'
                }
            }
        })
    </script>
</body>

</html>